@extends("layout/admin")
@section("content")
    <div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div>
                        <h3 class="font-bold no-margins">
                            最近七天销售业绩
                        </h3>
                    </div>

                    <div>
                        <canvas id="lineChart" height="70"></canvas>
                    </div>

                    <div class="m-t-md">
                        <small class="pull-right">
                            <i class="fa fa-clock-o"> </i>
                            {{date('Y-m-d H:i:s')}}
                        </small>
                        {{--<small>--}}
                            {{--<strong>Analysis of sales:</strong> The value has been changed over time, and last month reached a level over $50,000.--}}
                        {{--</small>--}}
                    </div>

                </div>
            </div>
        </div>
    </div>


    <div class="row">

        <div class="col-lg-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info pull-right">Monthly</span>
                    <h5>订单</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{{$ordersCount}}</h1>
                    {{--<div class="stat-percent font-bold text-info">40% <i class="fa fa-level-up"></i></div>--}}
                    <small>New orders</small>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-warning pull-right">Annual</span>
                    <h5>收入</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">&#65509; {{$allSales}}</h1>
                    <div class="stat-percent font-bold text-warning">16% <i class="fa fa-level-up"></i></div>
                    <small>New orders</small>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection
@section("js")

    <script>
        $(document).ready(function() {

            var lineData = {
                labels: ["{{$saleTime[0]}}", "{{$saleTime[1]}}", "{{$saleTime[2]}}", "{{$saleTime[3]}}", "{{$saleTime[4]}}", "{{$saleTime[5]}}", "{{$saleTime[6]}}"],
                datasets: [
                    {
                        label: "Example dataset",
                        fillColor: "rgba(26,179,148,0.5)",
                        strokeColor: "rgba(26,179,148,0.7)",
                        pointColor: "rgba(26,179,148,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(26,179,148,1)",
                        data: [{{$saleInfo[0]}}, {{$saleInfo[1]}}, {{$saleInfo[2]}}, {{$saleInfo[3]}}, {{$saleInfo[4]}}, {{$saleInfo[5]}}, {{$saleInfo[6]}}]
                    }
                ]
            };

            var lineOptions = {
                scaleShowGridLines: true,
                scaleGridLineColor: "rgba(0,0,0,.05)",
                scaleGridLineWidth: 1,
                bezierCurve: true,
                bezierCurveTension: 0.4,
                pointDot: true,
                pointDotRadius: 4,
                pointDotStrokeWidth: 1,
                pointHitDetectionRadius: 20,
                datasetStroke: true,
                datasetStrokeWidth: 2,
                datasetFill: true,
                responsive: true,
            };


            var ctx = document.getElementById("lineChart").getContext("2d");
            var myNewChart = new Chart(ctx).Line(lineData, lineOptions);

        });
    </script>
@endsection
